<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>联系人管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <el-card class="box-card">
        <div align="center" class="d1" style="color: mediumblue">
          <div style="float: left">
            <el-button @click="goafter" type="info" v-if="this.linkManForm.customerId!=null">返回上一级</el-button>
          </div>
          <div style="float: right">
            <el-button type="text" @click="importExcel = true">导入</el-button>
            <el-button type="text" @click="exportExcel">导出</el-button>
          </div>
          <h3>联系人管理界面</h3>
        </div>
        <div class="d2">
          <el-form :model="linkManForm" class="demo-form-inline">
            <el-row :gutter="20">
              <el-form-item>
                <el-col :span="5" v-if="linkManForm.customerId==null">
                  <el-input v-model="linkManForm.customerId" placeholder="所属客户编号"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-input v-model="linkManForm.name" placeholder="请输入名称"></el-input>
                </el-col>
                <el-col :span="3">
                  <template>
                    <el-select v-model="linkManForm.sex" placeholder="性别" >
                      <el-option label="男" :value="0"></el-option>
                      <el-option label="女" :value="1"></el-option>
                    </el-select>
                  </template>
                </el-col>
                <div style="float: right">
                  <el-button @click="list" plain type="info">搜索</el-button>
                  <el-button  @click="add(nowId)" type="primary">添加联系人</el-button>
                </div>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div class="d3">
          <el-table
            :data="linkManList"
            stripe
            style="width: 100%">
            <el-table-column>
              <template slot-scope="scope">
                {{scope.row.id}}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称">
            </el-table-column>
            <el-table-column
              label="性别">
              <template slot-scope="scope">
                {{scope.row.sex | sexgl}}
              </template>
            </el-table-column>
            <el-table-column
              prop="tel"
              label="电话号">
            </el-table-column>
            <el-table-column
              prop="position"
              label="职位">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-col :span="12">
                  <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                    <el-dropdown-menu slot="dropdown" style="width: 50px">
                      <div style="width: 30px;">
                        <el-button @click="del(scope.row.id)" plain type="text">删除</el-button>
                      </div>
                      <div style="width: 30px;">
                        <el-button @click="detailById(scope.row.id)" plain type="text">明细</el-button>
                      </div>
                      <div style="width: 30px;">
                        <el-button @click="updateById(scope.row.id)" plain type="text">修改</el-button>
                      </div>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div align="center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNum"
            :page-sizes="[2, 5, 7, 11]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>

    <div>
      <el-dialog title="联系人明细" :visible.sync="dialogFormVisible">
        <el-form :model="detailForm">
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="联系人名称" :label-width="formLabelWidth">
                <el-input v-model="detailForm.name" autocomplete="off" readonly></el-input>
              </el-form-item>
              <el-form-item label="性别" :label-width="formLabelWidth">
                <template>
                  <el-radio v-model="detailForm.sex" :label="0">男</el-radio>
                  <el-radio v-model="detailForm.sex" :label="1">女</el-radio>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="电话号" :label-width="formLabelWidth">
                <el-input v-model="detailForm.tel" autocomplete="off" readonly></el-input>
              </el-form-item>
              <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="detailForm.email" autocomplete="off" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="邮寄地址" :label-width="formLabelWidth">
                <el-input v-model="detailForm.recvAddress" autocomplete="off" readonly></el-input>
              </el-form-item>
              <el-form-item label="职位" :label-width="formLabelWidth">
                <el-input v-model="detailForm.position" autocomplete="off" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="所属客户" :label-width="formLabelWidth">
                <el-select v-model="detailForm.customerId" disabled  placeholder="请选择客户">
                  <el-option
                    v-for="item in options"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="描述">
                <el-input type="textarea" v-model="detailForm.remarks" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>


    <el-dialog title="导入Excel信息" width="400px" :visible.sync="importExcel">
      <el-upload
        class="upload-demo"
        drag
        :headers="auth"
        :on-success="uploadExcel"
        action="/api/information/pi-linkman/importExcel"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">上传用户Excel数据</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "LinkMan",
    data() {
      return {
        linkManList: [],
        linkManForm: {},
        detailForm: {},
        options:[],
        importExcel:false,
        auth:{},
        page: {
          pageSize: 5,
          pageNum: 0
        },
        total: 0,
        formLabelWidth: "120px",
        dialogFormVisible: false,
        nowId:''
      }
    },
    methods: {
      goafter() {
        this.$router.go(-1)
      },
      add(customerIdd) {
        this.$router.push(
          {
            path: '/addLinkman',
            query: {customerIdd}
          }
        )
      },
      updateById(id) {
        this.$router.push(
          {
            path: '/addLinkman',
            query: {id}
          }
        )
      },
      cxCotumer() {
        this.$http.post("/information/pi-customer/cxCotumerAll", {}).then((res) => {
          if (res.data.success) {
            this.options = res.data.result
          } else {
            this.$message.error(res.data.result.message)
          }
        })
      },
      del(id) {
        this.$http.delete("/information/pi-linkman/del/" + id).then((res) => {
          if (res.data.success) {
            this.$message.success(res.data.message)
            this.list()
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      list(id) {
        this.linkManForm.customerId=id
        this.$http.post("/information/pi-linkman/list/" + this.page.pageSize + "/" + this.page.pageNum, this.linkManForm).then((res) => {
          if (res.data.success) {
            this.linkManList = res.data.result.list
            this.total = res.data.result.total
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      detailById(id) {
        this.$http.get("/information/pi-linkman/detailById/" + id).then((res) => {
          if (res.data.success) {
            this.detailForm = res.data.result
            this.dialogFormVisible = true
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      handleSizeChange(val) {
        this.page.pageSize = val
        this.list()
      },
      handleCurrentChange(val) {
        this.page.pageNum = val
        this.list()
      },
      exportExcel() {
        location.href="http://localhost:8080/information/pi-linkman/exportExcel"
      },
      uploadExcel(res,file){
        if(res.success){
          this.$message.success(res.message)
          this.importExcel=false
          this.list()
        }
      }
    },
    filters: {
      sexgl(val) {
        if (val == 0) {
          return "男"
        } else {
          return "女"
        }
      }
    },
    mounted() {
      this.auth.token=sessionStorage.getItem("token")
      this.nowId = this.$route.query.id
      if (this.nowId != null) {
        this.list(this.nowId)
      }else{
        this.list()
      }
      this.cxCotumer()
    }
  }
</script>

<style scoped>
  .d1 {
    border-bottom: 1px solid #333744;
  }

  .d2 {
    margin: 20px
  }

  .d3 {
    margin-top: -20px
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>
